<template>
  <view
    v-show="visible"
    :class="setMessageColor"
    class="message "
  >
    <text
      class="iconfont "
      :class="setIcon"
    />
    {{ globalMessage }}
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "MMessage",
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    ...mapGetters(["globalMessageStatus", "globalMessage"]),
    setMessageColor() {
      let flag
      switch (this.globalMessageStatus) {
        case 0:
          flag = "seccess";
          break
        case 1:
          flag = "warning";
          break
        case 2:
          flag = "error";
          break
      }

      return flag
    },
    setIcon() {
      let flag

      switch (this.globalMessageStatus) {
        case 0:
          flag = "icon-Success-Small";
          break ;
        case 1:
          flag = "icon-tishi";
          break ;
        case 2:
          flag = "icon-cuowu";
          break ;
      }
      return flag
    },
  },
  watch: {
    globalMessage(value) {
      if (value) {
        this.displayMessage();
      }
    },
  },

  methods: {
    displayMessage() {
      this.visible = true;
      setTimeout(() => {
        // 清空消息
        this.visible = false;
        this.$store.commit("app/SET_MESSAGE", { message: "", status: "" });
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped src="./index.scss"></style>
